<script setup>
import { onPageScroll, onShow } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { fixCoverImageUrl } from '@/utils/fixImageUrls'
import { getPlayStrategyAndScenicSpotList } from '@/api/play'
import NavBar from '@/components/NavBar.vue'

// 滚动距离，用于导航栏背景色渐变
const scrollTop = ref(0)
onPageScroll((event) => {
  scrollTop.value = event.scrollTop
})

const playStrategyList = ref([]) // 游玩攻略
const scenicSpotList = ref([]) // 周边景点

async function onGetPlayStrategyAndScenicSpot() {
  const { result: { gonglueList, jingdianList } } = await getPlayStrategyAndScenicSpotList()
  playStrategyList.value = gonglueList.map(item => ({ ...item, cover: fixCoverImageUrl(item.cover) }))
  scenicSpotList.value = jingdianList.map(item => ({ ...item, cover: fixCoverImageUrl(item.cover) }))
}

const menuItem = [
  { name: '游玩攻略', icon: '../../static/image/play/play-icon-1.jpeg', route: '/pages/play/view/play-strategy-list' },
  { name: '周边景点', icon: '../../static/image/play/play-icon-2.jpeg', route: '/pages/play/view/scenic-spot-list' },
  { name: '交通指引', icon: '../../static/image/play/play-icon-3.jpeg', route: '/pages/play/view/bus-guide' },
  { name: '停车指引', icon: '../../static/image/play/play-icon-4.jpeg', route: '/pages/play/view/parking-instruction' },
]

function goMenuDetail(route) {
  uni.navigateTo({ url: route })
}

function goPlayStrategyDetail(id) {
  uni.navigateTo({ url: `/pages/play/view/play-strategy-detail?id=${id}` })
}

function goScenicSpotDetail(id) {
  uni.navigateTo({ url: `/pages/play/view/scenic-spot-detail?id=${id}` })
}

onShow(() => {
  onGetPlayStrategyAndScenicSpot()
})
</script>

<template>
  <view class="container pb-safe min-h-safe">
    <NavBar title="金榜牛乳街" title-color="#fff" change-title-color :scroll-top="scrollTop" :show-left-icon="false" />
    <main class="p-1.5">
      <view class="px-4 mb-1.5 bg-white rounded-xl shadow flex h-140 justify-around">
        <view v-for="item in menuItem" :key="item.name" class="py-2 center flex-col" @click="goMenuDetail(item.route)">
          <image class="mb-1.5 block h-68 w-68" :src="item.icon" mode="aspectFit" />
          <p class="text-xs">
            {{ item.name }}
          </p>
        </view>
      </view>

      <view
        v-for="item in playStrategyList"
        :key="item.id"
        class="mb-2 bg-white rounded-xl shadow overflow-hidden"
        @click="goPlayStrategyDetail(item.id)"
      >
        <image class="block h-280 w-full" :src="item.cover" mode="aspectFill" />
        <view class="py-2.5 flex justify-between">
          <p class="px-1.5 text-28 text-black font-semibold">
            {{ item.title }}
          </p>
          <view class="px-1.5 text-[#666] center">
            <view class="i-ant-design:heart-outlined" />
            <view class="pl-0.5 text-20">
              {{ item.xihuan }}
            </view>
          </view>
        </view>
      </view>

      <view class="m-2.5">
        <img class="block h-37 w-157" src="@/static/image/play/text.png" alt="">
      </view>

      <view
        v-for="item in scenicSpotList"
        :key="item.id"
        class="mb-2 bg-white rounded-xl shadow overflow-hidden"
        @click="goScenicSpotDetail(item.id)"
      >
        <image class="block h-280 w-full" :src="item.cover" mode="aspectFill" />
        <view class="py-2.5 flex justify-between">
          <p class="px-1.5 text-28 text-black font-semibold">
            {{ item.title }}
          </p>
          <view class="px-1.5 text-[#666] center">
            <view class="i-ant-design:heart-outlined" />
            <view class="pl-0.5 text-20">
              {{ item.xihuan }}
            </view>
          </view>
        </view>
      </view>
    </main>
  </view>
</template>

<style scope>
.container {
  background-image: linear-gradient(to bottom, #fba414 10%, #f3f3f3 40%);
}
</style>
